
<template>
  <el-row>

    <el-col :span="6">
      <el-statistic :value="138">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            市场活动
          </div>
        </template>
        <template #suffix>/100</template>
      </el-statistic>
    </el-col>

    <el-col :span="6">
      <el-statistic title="线索总数" :value="268500" />
    </el-col>

    <el-col :span="6">
      <el-statistic title="客户总数" :value="1249" />
    </el-col>

    <el-col :span="6">
      <el-statistic :value="138">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            交易总额
          </div>
        </template>
        <template #suffix>/100</template>
      </el-statistic>
    </el-col>
  </el-row>
  <div id="main" style="width: 600px; height: 400px; margin-top: 60px;float: left"> </div>
  <div id="source" style="width: 600px; height: 400px; margin-top: 60px; float: right"></div>
  <div id="marketActivity" style="width: 100%; height: 400px; margin-top: 60px; margin-top: 500px"></div>


</template>

<script >
import * as echarts from 'echarts';

export default {
  data(){
    return{

    }
  },
  methods:{
    /**
     * 加载漏斗图
     */
    loadSaleFunnelChart(){
      //获取页面dom元素
      var chartDom = document.getElementById('main');

      //都拿到的dom元素初始化
      var myChart = echarts.init(chartDom);
      var option;
      //配置可选项
      option = {
        title: {
          text: '销售漏斗图',
          top: 'bottom',
          left: 'center'
        },
        //提示框
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        //工具栏
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['线索', '客户', '交易', '成交']
        },
        //系列项 样式设置
        series: [
          {
            name: '交易流程',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 50, name: '交易' },
              { value: 25, name: '成交' },
              { value: 75, name: '客户' },
              { value: 100, name: '线索' }
            ]
          }
        ]
      };
      //option配置对象存在，并且设置到图表中
      option && myChart.setOption(option);

    },
    /**
     * 加载线索来源饼图
     */
    loadSourcePieChart(){
      var chartDom = document.getElementById('source');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '线索来源',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '线索来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '公众号' },
              { value: 735, name: '懂车帝' },
              { value: 580, name: '视频直播' },
              { value: 484, name: '网络直播' },
              { value: 300, name: '网络广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);

    },
    /**
     * 加载市场活动图
     */
    loadMarketActivity(){
      var chartDom = document.getElementById('marketActivity');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '市场活动',
          top: 'bottom',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130,110,189,148,182,114,],
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);

    },
  },
  mounted() {
    this.loadSaleFunnelChart();
    this.loadSourcePieChart()
    this.loadMarketActivity()
  }
}


</script>


<style scoped>
.el-row{
  text-align: center;
}
.el-col{
  text-color: blue;
}


</style>